<template>
    <el-card shadow="never" class="header">
        <div class="header_title mr_b">{{ AllData.activity_name }}</div>
        <div class="header_content mr_b">
            <div>创建人：{{ AllData.created_user }}</div>
            <div class="active_type">
                活动类型：
                <p class="tag">{{ AllData.activity_type === 1 ? '普通裂变' : '高级裂变' }}</p>
            </div>
            <div class="status">
                状态：
                <span :style="{ color: StatusColor(AllData.status_name) }">{{ AllData.status_name }}</span>
            </div>
            <div v-if="AllData.activity_type == 2">公众号：{{ AllData?.official_account_info.nick_name }}</div>
        </div>
        <div class="header_timer mr_b">
            <div>创建时间：{{ AllData.created_at }}</div>
            <div v-if="AllData.period_type == 1">有效期：永久</div>
            <div v-else class="create_date">创建有效期：{{ effectTime[0] }} 至 {{ effectTime[1] }}</div>
        </div>
        <div class="header_prize header_timer">
            <div v-if="AllData.real_end_date">提前结束时间：{{ AllData.real_end_date }}</div>
            <div v-for="item in AllData.reward_info" :key="item.help_num" class="reward">
                {{ `${stepText[item.step]}级奖励：${item.title} /${item.help_num}人` }}
            </div>
        </div>
    </el-card>
    <div class="search_box">
        <ZwSearchForm row-num="3" :option="ZwSearchOption" @search="search" @reset="reset" @expand="expandSearch" />
    </div>

    <ZwTable
        ref="tableRef"
        class="table-box"
        :option="ZwOption"
        :row-key="ZwGetRowKey"
        :fetch-params="ZwState.searchParams"
        :fetch-api="ZwFetchApi()"
        @selection-change="onSelectionChange">
        <template #headerOperate>
            <el-button :disabled="selectArr.length == 0" @click="batchMegr(1, selectArr2)">批量核销</el-button>
            <el-button :disabled="selectArr.length == 0" @click="exportWins()">导出中奖记录</el-button>
            <el-button type="primary" :disabled="selectArr.length == 0" @click="exportData(1, selectArr)">
                导出助力者
            </el-button>
        </template>
    </ZwTable>
    <!-- 中奖记录 -->
    <el-drawer v-model="drawer" class="draOut" destroy-on-close :with-header="false" size="45%">
        <template #header>
            <div class="dialog_header">助力信息</div>
        </template>
        <div class="base_info">
            <el-avatar shape="square" :size="24" :src="row_data.headimgurl" />
            <span class="name">{{ row_data.cust_name || row_data.nickname }}</span>
        </div>
        <div class="type_nums">
            <p>
                助力客户数：<span>{{ help_cust_total }}</span>
            </p>
            <p>
                引流员工：<span>{{ row_data.employee_name }}</span>
            </p>
            <p>
                任务阶段：<span>{{ stepText[row_data.step] }}级</span>
            </p>
        </div>
        <ZwTable
            ref="tableRef"
            class="table-box"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            :tab-h="prizeTh"
            @selection-change="onSelectionChange"
            @dataChange="onHelpDataChange">
            <template #headerOperate>
                <el-button type="primary" @click="exportData(2, [row_data.external_userid])">导出</el-button>
            </template>
        </ZwTable>
    </el-drawer>

    <el-drawer v-model="drawer2" class="draOut" destroy-on-close :with-header="false" size="45%">
        <p class="draTitle">
            <span>{{ reward_title }}</span>
            <el-icon @click="close">
                <Close />
            </el-icon>
        </p>
        <header>
            <div class="base_info">
                <el-avatar shape="square" :size="24" :src="cust_info?.headimgurl" />
                <span class="name">{{ cust_info?.name }}</span>
            </div>
            <div class="type_nums">
                <p>
                    助力客户数：<span>{{ cust_info?.assist_num }}</span>
                </p>
                <p>
                    中奖次数：<span>{{ cust_info?.win_num }}</span>
                </p>
                <p>
                    参与活动时间：<span>{{ cust_info?.participation_time }}</span>
                </p>
            </div>
            <ZwTable
                ref="tableRef2"
                class="table-box"
                :option="tableOption2"
                :tab-h="prizeTh"
                :fetch-params="state2.searchParams"
                :fetch-api="fetchApi2()"
                @selection-change="onSelectionChange2"
                @dataChange="dataChange">
                <template #headerOperate>
                    <el-button size="small" :disabled="selectArr3.length <= 0" @click="handlBtn(selectArr3)">
                        批量核销
                    </el-button>
                    <el-button type="primary" size="small" :disabled="selectArr3.length <= 0" @click="exportWinViwe">
                        导出
                    </el-button>
                </template>
            </ZwTable>
        </header>
    </el-drawer>
    <SetAddress ref="setAddressRef" @refresh="refresh" />
</template>

<script setup lang="tsx">
import { StatusColor } from '@/utils/smartMarketing';
import { ref, reactive, nextTick, watch, onBeforeMount, computed } from 'vue';
import { Picture as IconPicture, InfoFilled } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import SetAddress from './components/SetAddress.vue';
// 用户信息组件
import UserInfo from '@/view/smartMarketing/drainage/groupFission/statistics/components/UserInfo.vue';

import { deepCopy } from '@/utils/helper';
import { getSetionId, defaultTime, reSize } from '@/utils/utils';

import {
    getParticipants,
    getHelpList,
    expHelpData,
    exportWinList,
    exportWin,
    winVerification,
    getStepList
} from '@/api/smartMarketing/fissionDrainage';
import { useStore } from '@/store';
import { ElButton, ElPopover, ElAvatar, ElMessage, ElImage, ElIcon, ElMessageBox } from 'element-plus';
const store = useStore();
const route = useRoute();
const router = useRouter();
const tableRef: any = ref(null);
const setAddressRef = ref<any>(null);
const tableRef2 = ref();
const selectArr = ref([]);
const selectArr2 = ref([]);
const selectArr3 = ref([]);
const drawer = ref(false);
const drawer2 = ref(false);
const cust_info = ref('');
const reward_title = ref('');
const stageRes: any = ref([]);
const prizeTh = ref(650); // 计算助力明细和中奖记录表格高度
const row_data = ref({
    nickname: '',
    cust_name: '',
    headimgurl: '',
    help_num: 0,
    employee_name: '',
    step: '',
    external_userid: ''
});
const defaultParams = reactive({
    activity_id: route.query.id,
    external_userid: ''
});
const defaultParams2 = reactive({
    activity_id: route.query.id,
    union_ids: ''
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const state2 = reactive({
    searchParams: deepCopy(defaultParams2)
});
const stepText = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
const ZWTableSearchKey = ref();
onBeforeMount(async () => {
    try {
        const res = await getStepList({
            activity_id: route.query.id
        });
        const option = res.map((item: any) => ({ ...item, value: item.step, label: item.step_name }));
        const finish_step: any = ZwSearchOption.value.find((item: any) => item.key === 'finish_step');
        stageRes.value = [{ value: -1, label: '全部' }, ...option];
        finish_step?.option?.splice(0, finish_step?.option.length, ...[{ value: -1, label: '全部' }, ...option]);
    } finally {
        ZWTableSearchKey.value = +new Date();
    }
});

const ZwGetRowKey = (row: any) => {
    return row.id;
};
const ZwSearchOption = computed(() => {
    return [
        {
            label: '客户搜索',
            name: 'nickname',
            value: '',
            type: 'input',
            width: '280px',
            placeholder: '请输入'
        },
        {
            label: '完成状态',
            name: 'status',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '全部', id: '-1' },
                        { name: '完成', id: '1' },
                        { name: '未完成', id: '2' }
                    ]);
                });
            },
            formatOption: (v: { name: any; id: any }) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '任务阶段',
            name: 'finish_step',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve(stageRes.value);
                });
            },
            formatOption: (v: { label: any; value: any }) => ({
                label: v.label,
                value: v.value
            })
        },
        {
            label: '参与时间',
            name: 'participation_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            defaultTime: defaultTime(),
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        },
        {
            label: '完成时间',
            name: 'complete_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            defaultTime: defaultTime(),
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        },
        {
            label: '核销状态',
            name: 'verification_status',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '全部', id: -1 },
                        { name: '已核销', id: 2 },
                        { name: '未核销', id: 1 }
                    ]);
                });
            },
            formatOption: (v: { name: any; id: any }) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '兑奖码',
            name: 'exchange_code',
            value: '',
            type: 'input',
            width: '280px',
            placeholder: '请输入兑奖码'
        }
    ];
});

const ZwOption = computed(() => {
    const arr = [
        {
            type: 'selection',
            width: 55,
            fixed: 'left',
            reserveSelection: true
        },
        {
            prop: 'headimgurl',
            label: '客户信息',
            width: 200,
            render({ row }) {
                const slotError = () => (
                    <div class="image_slot">
                        <ElIcon>
                            <IconPicture />
                        </ElIcon>
                    </div>
                );
                return (
                    <div style="display: flex; align-items: center">
                        <ElImage
                            preview-src-list={[row.headimgurl]}
                            vSlots={{ error: slotError }}
                            preview-teleported={true}
                            style="width: 36px; height: 36px; font-size: 36px"
                            src={row.headimgurl}
                            fit="cover"
                            class="avatar"></ElImage>
                        <span class="list_name" vShow={row.cust_name}>
                            {row.cust_name}
                        </span>
                        <span vShow={!row.cust_name}>{row.nickname}</span>
                    </div>
                );
            }
        },
        {
            prop: 'exchange_code',
            label: '兑奖码',
            width: 200,
            showOverflowTooltip: true
        },
        {
            prop: 'help_num',
            label: '助力人数',
            width: 120,
            renderHeader() {
                const slotReference = () => (
                    <ElIcon>
                        <InfoFilled color="#E3E3E3" />
                    </ElIcon>
                );
                return (
                    <p class="header_label">
                        助力人数
                        <ElPopover
                            effect="dark"
                            placement="top-start"
                            width={200}
                            vSlots={{ reference: slotReference }}
                            trigger="hover"
                            content="该客户的有效助力成功的人数（不包含领奖前删除好友的助力人）"
                        />
                    </p>
                );
            },
            render({ row }) {
                return <span class="tableVal">{row.help_num}</span>;
            }
        },
        {
            prop: 'guest_num',
            label: '获客数',
            width: 120,
            renderHeader() {
                const slotReference = () => (
                    <ElIcon>
                        <InfoFilled color="#E3E3E3" />
                    </ElIcon>
                );
                return (
                    <p class="header_label">
                        获客数
                        <ElPopover
                            effect="dark"
                            placement="top-start"
                            width={200}
                            vSlots={{ reference: slotReference }}
                            trigger="hover"
                            content="通过该客户裂变的添加企业员工好友的客户数量（包括已删除的好友的客户）"
                        />
                    </p>
                );
            },
            render({ row }) {
                return <span class="tableVal">{row.guest_num}</span>;
            }
        },
        {
            prop: 'lost_num',
            label: '流失客户数',
            width: 130,
            renderHeader() {
                const slotReference = () => (
                    <ElIcon>
                        <InfoFilled color="#E3E3E3" />
                    </ElIcon>
                );
                return (
                    <p class="header_label">
                        流失客户数
                        <ElPopover
                            effect="dark"
                            placement="top-start"
                            width={200}
                            vSlots={{ reference: slotReference }}
                            trigger="hover"
                            content="通过该客户添加好友后又删除好友的客户数"
                        />
                    </p>
                );
            },
            render({ row }) {
                return <span class="tableVal">{row.lost_num}</span>;
            }
        },
        {
            prop: 'follow_fan_num',
            label: '关注粉丝数',
            width: 130,
            renderHeader() {
                const slotReference = () => (
                    <ElIcon>
                        <InfoFilled color="#E3E3E3" />
                    </ElIcon>
                );
                return (
                    <p class="header_label">
                        关注粉丝数
                        <ElPopover
                            effect="dark"
                            placement="top-start"
                            width={200}
                            vSlots={{ reference: slotReference }}
                            trigger="hover"
                            content="通过该客户裂变的粉丝数（包括取关的粉丝数）"
                        />
                    </p>
                );
            },
            render({ row }) {
                return <span class="tableVal">{row.follow_fan_num}</span>;
            }
        },
        {
            prop: 'un_follow_fan_num',
            label: '取关粉丝数',
            width: 130,
            renderHeader() {
                const slotReference = () => (
                    <ElIcon>
                        <InfoFilled color="#E3E3E3" />
                    </ElIcon>
                );
                return (
                    <p class="header_label">
                        取关粉丝数
                        <ElPopover
                            effect="dark"
                            placement="top-start"
                            width={200}
                            vSlots={{ reference: slotReference }}
                            trigger="hover"
                            content="通过该客户关注的公众号粉丝又取消关注的数量"
                        />
                    </p>
                );
            },
            render({ row }) {
                return <span class="tableVal">{row.un_follow_fan_num}</span>;
            }
        },
        {
            prop: 'employee_name',
            label: '引流员工',
            width: 200,
            renderHeader() {
                const slotReference = () => (
                    <ElIcon>
                        <InfoFilled color="#E3E3E3" />
                    </ElIcon>
                );
                return (
                    <p class="header_label">
                        引流员工
                        <ElPopover
                            effect="dark"
                            placement="top-start"
                            width={200}
                            vSlots={{ reference: slotReference }}
                            trigger="hover"
                            content="参与者在这次活动中为参与者时最近一次加的员工"
                        />
                    </p>
                );
            },
            render({ row }) {
                return <span>{row.employee_name}</span>;
            }
        },
        {
            prop: 'is_follow',
            label: '公众号',
            width: 200,
            render({ row }) {
                return (
                    <>
                        <p vShow={row.is_follow === 0} class="unAttention">
                            未关注
                        </p>
                        <p vShow={row.is_follow === 1} class="attention">
                            已关注
                        </p>
                        <p vShow={row.is_follow === 2} class="cancel_attention">
                            已取关
                        </p>
                    </>
                );
            }
        },
        {
            prop: 'step',
            label: '任务阶段',
            width: 120,
            render({ row }) {
                return <span>{stepText[row.step]}级</span>;
            }
        },
        {
            prop: 'finish_status',
            label: '完成情况',
            width: 120,
            render({ row }) {
                return (
                    <>
                        <span vShow={row.finish_status == 0}>全部</span>
                        <span vShow={row.finish_status == 1}>已完成</span>
                        <span vShow={![1, 0].includes(row.finish_status)}>进行中</span>
                    </>
                );
            }
        },
        {
            prop: 'award_status',
            label: '参与时间',
            width: 180,
            render({ row }) {
                return <span>{row.participation_time || '--'}</span>;
            }
        },
        {
            prop: 'finish_at',
            label: '阶段完成时间',
            width: 180,
            render({ row }) {
                return <span>{row.finish_at || '--'}</span>;
            }
        },
        {
            prop: 'verification_status_name',
            label: '核销状态',
            render({ row }) {
                return <span>{row.verification_status_name || '--'}</span>;
            }
        },
        {
            prop: 'operate',
            label: '操作',
            align: 'left',
            fixed: 'right',
            width: 200,
            isOperate: true,
            renderOperate({ row, column, index }) {
                return (
                    <>
                        <ElButton
                            size="small"
                            vShow={row.cust_id != 0}
                            onClick={() => router.push(`/customer/manage/list/detail?id=${row.cust_id}&type=1`)}>
                            客户详情
                        </ElButton>
                        <ElButton size="small" vShow={row.cust_id != 0} onClick={() => helpeNum(row)}>
                            助力明细
                        </ElButton>
                        <ElButton size="small" onClick={() => winList(row)}>
                            中奖记录
                        </ElButton>
                        <ElButton size="small" vShow={row.verification_status == 1} onClick={() => batchMegr(2, row)}>
                            核销
                        </ElButton>
                        <ElButton
                            size="small"
                            disabled
                            vShow={row.verification_status != 1 && row.verification_status != 4}>
                            {row.verification_status == 2 ? '核销中' : '已核销'}
                        </ElButton>
                    </>
                );
            }
        }
    ];
    if (AllData.value.activity_type != 2) {
        arr.splice(5, 2);
        arr.splice(6, 1);
    }
    return arr;
});

const ZwDefaultParams = {
    article_detail_type: '',
    draft_title: '',
    official_account_id: '',
    publish_state: '',
    exchange_code: '',
    page: 1,
    page_size: 15
};
const ZwState = reactive({
    searchParams: deepCopy({ ...ZwDefaultParams, activity_id: route.query.id })
});
const search = (data: any) => {
    tableRef.value.getTable().clearSelection();
    ZwState.searchParams = { ...ZwDefaultParams, ...data, activity_id: route.query.id };
};
const reset = (v?: any) => {
    tableRef.value.getTable().clearSelection();
    ZwState.searchParams = deepCopy({ ...v, activity_id: route.query.id });
};
const ZwFetchApi = () => {
    return getParticipants;
};

const tableOption = reactive([
    {
        prop: 'name',
        label: '客户信息',
        render({ row, column, index }) {
            return (
                <div class="cust_info">
                    <ElAvatar shape="square" size={24} src={row.headimgurl}></ElAvatar>
                    <p class="name">{row.nickname}</p>
                </div>
            );
        }
    },
    {
        prop: 'assist_time',
        label: '助力时间'
    },
    {
        prop: 'is_deleted',
        label: '状态',
        render({ row }) {
            return (
                <div>
                    <span vShow={AllData.value.activity_type === 1}>{row.is_deleted == 1 ? '已删除' : '--'}</span>
                    <p vShow={AllData.value.activity_type === 2}>
                        <span>{row.is_unfollow == 1 && row.is_deleted != 1 ? '已取关' : ''}</span>
                        <span>{row.is_deleted == 1 && row.is_unfollow != 1 ? '已删除' : ''}</span>
                        <span vShow={row.is_deleted == 1 && row.is_unfollow == 1}>取关并删除</span>
                        <span vShow={row.is_deleted == 0 && row.is_unfollow == 0}>--</span>
                    </p>
                </div>
            );
        }
    },
    {
        prop: 'operate',
        label: '操作',
        width: 120,
        fixed: 'right',
        isOperate: true,
        renderOperate({ row, column, index }) {
            return (
                <ElButton
                    size="small"
                    onClick={() => {
                        router.push(`/customer/manage/list/detail?id=${row.cust_id}&type=1`);
                    }}>
                    客户详情
                </ElButton>
            );
        }
    }
]);
const verificationType = (id: any) => {
    const res = {
        1: '未核销',
        2: '已核销',
        3: '核销中',
        4: '核销失败'
    };
    return res[id];
};
const tableOption2 = reactive([
    {
        type: 'selection',
        width: 55,
        fixed: 'left'
    },
    {
        prop: 'name',
        width: 180,
        label: '奖品信息',
        render({ row, column, index }) {
            return (
                <div class="cust_info">
                    <ElAvatar shape="square" size={24} src={row.img}></ElAvatar>
                    <p class="name">{row.name}</p>
                </div>
            );
        }
    },
    {
        prop: 'reward_type',
        label: '奖品类型',
        width: 100,
        render({ row }) {
            return (
                <div>
                    <span vShow={row.reward_type === 1}>实物</span>
                    <span vShow={row.reward_type === 2}>{row.red_envelope_type === 1 ? '普通红包' : '拼手气红包'}</span>
                    <span vShow={row.reward_type === 3}>谢谢惠顾</span>
                </div>
            );
        }
    },
    {
        prop: 'prize_time',
        label: '中奖时间',
        width: 180
    },
    {
        prop: 'red_envelope_money',
        label: '金额',
        width: 120,
        render({ row }) {
            return (
                <div>
                    <p vShow={row.reward_type == 2}>
                        <span vShow={row.red_envelope_type == 2 && row.award_status == 2}>
                            {row.red_envelope_money}~{row.red_envelope_range}元
                        </span>
                        <span vShow={!(row.red_envelope_type == 2 && row.award_status == 2)}>
                            {row.amount || row.red_envelope_money}元
                        </span>
                    </p>
                    <span vShow={row.reward_type !== 2}>--</span>
                </div>
            );
        }
    },
    {
        prop: 'exchange_code',
        label: '兑奖码',
        width: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'avatar',
        label: '邮寄信息',
        width: 200,
        render({ row }: unknown) {
            const { province, city, area } = row.consignee_region ?? {};
            const consignee_region = `${province?.name ?? ''}${city?.name ?? ''}${area?.name ?? ''}`;
            const resText = `${row.consignee_name}-${row.consignee_phone}-${consignee_region}-${row.consignee_address}`;
            return (
                <>
                    <div vShow={row.verification_status === 2}>
                        <UserInfo name={resText} limit={30}></UserInfo>
                    </div>
                    <div vShow={row.verification_status !== 2}>--</div>
                </>
            );
        }
    },
    {
        prop: 'award_status',
        label: '兑奖状态',
        render({ row }) {
            return <span>{row.award_status === 1 ? '已兑奖' : '未兑奖'}</span>;
        }
    },
    {
        prop: 'verification_status',
        label: '核销状态',
        render({ row }) {
            return <span>{verificationType(+row.verification_status)}</span>;
        }
    },
    {
        prop: 'verification_uid_name',
        label: '核销人',
        render({ row }) {
            return <span>{row.verification_uid_name || '--'}</span>;
        }
    },
    {
        prop: 'verification_time',
        label: '核销时间',
        width: 180,
        render({ row }) {
            return <span>{row.verification_time || '--'}</span>;
        }
    },
    {
        prop: 'fail_reason',
        label: '失败原因',
        width: 180,
        showOverflowTooltip: true
    },
    {
        prop: 'operate',
        label: '操作',
        width: 200,
        fixed: 'right',
        isOperate: true,
        renderOperate({ row, column, index }) {
            return (
                <div>
                    <ElButton
                        vShow={row.verification_status == 1 || row.verification_status == 4}
                        size="small"
                        onClick={() => handlBtn([row.activity_record_id])}>
                        核销
                    </ElButton>
                    <ElButton vShow={row.is_show_edit_address} size="small" onClick={() => setAddress(row)}>
                        修改地址
                    </ElButton>
                    <ElButton vShow={row.verification_status == 3} size="small" disabled>
                        核销中
                    </ElButton>
                    <ElButton vShow={row.verification_status == 2} size="small" disabled>
                        已核销
                    </ElButton>
                </div>
            );
        }
    }
]);
const fetchApi = () => {
    // 获取文件列表
    return getHelpList;
};
const fetchApi2 = () => {
    // 获取文件列表
    return exportWin;
};
const expandSearch = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};
const onSelectionChange = (data: any) => {
    selectArr.value = getSetionId('external_userid', data);
    selectArr2.value = data;
};
const onSelectionChange2 = (data: any) => {
    selectArr3.value = getSetionId('activity_record_id', data);
};
const exportData = (type: number, arr: any) => {
    const params = {
        activity_id: route.query.id,
        external_userid: arr,
        type: type
    };
    expHelpData(params).then((res: any) => {
        window.location.href = res.file_url;
        ElMessage.success('导出成功！');
    });
};
const exportWins = () => {
    const p = {
        activity_id: route.query.id,
        ids: getSetionId('id', selectArr2.value),
        type: 1
    };
    exportWinList(p).then((res: any) => {
        window.location.href = res.file_url;
    });
};
const winList = (row: any) => {
    const p = {
        activity_id: route.query.id,
        union_ids: row.unionid
    };
    reward_title.value = `【${row.cust_name ? row.cust_name : row.nickname}${
        row.remark ? '｜' + row.remark : ''
    }】的中奖记录`;
    drawer2.value = true;
    state2.searchParams.union_ids = row.wx_external_userid;
};
const handlBtn = (row: any) => {
    const p = {
        activity_id: route.query.id,
        ids: row,
        type: 2
    };
    ElMessageBox.confirm(`您确定要核销${cust_info.value?.name}的所有奖品吗？`, '核销提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        winVerification(p).then((res: any) => {
            ElMessage.success('操作成功！');
            tableRef2.value.reload();
        });
    });
};
const exportWinViwe = () => {
    const p = {
        activity_id: route.query.id,
        ids: selectArr3.value,
        type: 2
    };
    exportWinList(p).then((res: any) => {
        window.location.href = res.file_url;
    });
};
const thirdCust = (data: any) => {
    const multi = `您确定要核销客户${data[0] ? data[0]?.cust_name || data[0]?.nickname : ''}${
        data[1] ? '、' + data[1]?.cust_name || data[1]?.nickname : ''
    }${data[2] ? '、' + data[2]?.cust_name || data[2]?.nickname : ''}等${data.length}个客户的所有奖品吗？`;
    return multi;
};
const batchMegr = (isBath: number, row: any) => {
    const p = {
        activity_id: route.query.id,
        ids: isBath == 1 ? getSetionId('id', row) : [row.id],
        type: 1
    };
    const single = `您确定要核销客户${row.cust_name ? row.cust_name : row.nickname}的所有奖品吗？`;
    ElMessageBox.confirm(isBath == 1 ? thirdCust(row) : single, '核销提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        winVerification(p).then((res: any) => {
            ElMessage.success('操作成功！');
            tableRef.value.reload();
            tableRef2.value.reload();
        });
    });
};
const AllData: any = ref({});
const effectTime = ref(['', '']);
const searchParams = reactive({});
const PaginationRef = ref({});
const handleSearch = (data: any) => {
    Object.assign(searchParams, {
        nickname: data?.nickname || '',
        status: data?.status || -1,
        verification_status: data?.verification_status || -1,
        finish_step: data?.finish_step || -1,
        page: 1,
        page_size: 15,
        participation_time: data?.participation_time || [],
        complete_time: data?.complete_time || []
    });
    PaginationRef.value.initPage = true;
    getPartiList();
};
const getPartiList = async () => {
    const params = {
        activity_id: route.query.id,
        ...searchParams
    };
    const res = await getParticipants(params);
    AllData.value = res;
    effectTime.value = res.effect_time || ['', ''];
    store.dispatch('pageTotal', res.total);
};
getPartiList();
// 分页
const onPaging = (data: any) => {
    searchParams.page = data.page;
    searchParams.page_size = data.page_size;
    getPartiList();
};
const close = () => {
    drawer.value = false;
    drawer2.value = false;
};
const helpeNum = (row: any) => {
    row_data.value = row;
    state.searchParams.external_userid = row.external_userid;
    drawer.value = true;
};
watch(
    () => drawer.value,
    val => {
        if (!val) selectArr.value = [];
    }
);
const dataChange = (res: any) => {
    // 这里要做一个单独的，id。原因是ZwTable选择onSelectionChange方法。里面的逻辑根据每一项的id做处理。否则选择的回调会一直根据id做重复过滤
    if (Array.isArray(res.data)) {
        for (const iterator of res.data) {
            iterator.id = iterator.activity_record_id;
        }
    }
    cust_info.value = res.cust_info;
};
const help_cust_total = ref(0);
const onHelpDataChange = (res: any) => {
    help_cust_total.value = res.total ?? 0;
};
// 打开修改地址弹框
const setAddress = (row: any) => {
    setAddressRef.value.open(row);
};
// 刷新表格中奖表格数据
const refresh = () => {
    tableRef2.value.reload();
};
// 计算助力明细和中奖记录表格高度
const prizeTableHeight = () => {
    const dome: any = document.querySelector('.el-drawer__body');
    prizeTh.value = dome.offsetHeight - 320;
};
reSize(prizeTableHeight);
</script>

<style lang="scss" scoped>
.header {
    margin-bottom: 16px;
    :deep(.el-card__body) {
        // display: grid;
        // grid-template-columns: repeat(3, 1fr);
        // grid-gap: 20px;
        font-size: 14px;
    }
    &_title {
        font-size: 18px;
        font-weight: 500;
    }
    &_content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        align-items: center;
        .active_type {
            display: flex;
            align-items: center;
        }
        .tag {
            padding: 6px;
            background: #fffaf9;
            border-radius: 2px;
            border: 1px solid #ffc69e;
            color: #ff6b00;
            line-height: 12px;
        }
    }
    &_timer {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
    }
    .mr_b {
        white-space: nowrap;
        margin-bottom: 18px;
    }
    .create_date {
        margin-left: 34px;
    }
}
:deep(.header_label) {
    display: flex;
    align-items: center;
}
.header_box {
    padding: 20px 26px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px rgba(240, 240, 240, 0.5);
    border: 1px solid #eaeaea;
    font-size: 14px;
    color: #33302d;

    .header_top {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: 30px;
    }
    .header_bottom {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-gap: 30px;
    }
}
.export_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 0;
    padding: 20px 20px 0 28px;
    background: #ffffff;
    font-size: 14px;
    color: #33302d;
    .zw-table-search {
        // margin-bottom: 16px;
        background-color: #fff;
    }
}
.search_box {
    margin: 16px 0;
    padding: 20px 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    font-size: 14px;
    color: #33302d;
    .zw-table-search {
        // margin-bottom: 16px;
        background-color: #fff;
    }
}
.table_box {
    padding: 20px;
    background-color: #fff;
}
.draTitle {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px #eaeaea solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.base_info {
    display: flex;
    align-items: center;
    .name {
        font-size: 14px;
        margin-left: 8px;
    }
}
.type_nums {
    font-size: 14px;
    font-weight: 400;
    color: #969696;
    line-height: 20px;
    margin-top: 11px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eaeaea;
    span {
        color: #33302d;
    }
}
.export_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #ffffff;
    border: 1px solid #f9f9f9;
    padding: 10px 25px 10px 0;
    border-bottom: none;
    box-sizing: border-box;
}
:deep(.cust_info) {
    display: flex;
    align-items: center;
    .name {
        margin-left: 10px;
    }
}
.btn_box {
    display: flex;
    align-items: center;
}
.m_r {
    margin-top: 5px;
}
.merBtn {
    padding: 0 27px;
}
.merBtn2 {
    padding: 0 21px;
}
:deep(.list_name) {
    margin-left: 7px;
}
:deep(.tableVal) {
    color: #ff6b00;
}
</style>
